<template>
  <canvas ref="mycanvas "></canvas>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';
import QRCode from 'qrcode';

const props = defineProps({
  value: {
    type: String,
    default: ""
  },
  width: {
    type: Number,
    default: 300 // 默认宽度设为400px
  }
});

const qrcode = ref(null);

onMounted(() => {
  render();
});

const render = () => {
  QRCode.toCanvas(qrcode.value, props.value, {
    width: props.width, // 设置宽度
    margin: 2,          // 设置边距
    color: {
      dark: "#000000",  // 黑色模块
      light: "#FFFFFF"  // 白色背景
    }
  }, (error) => {
    if (error) console.error(error);
  });
};
</script>

<style scoped>
canvas {
  max-width: 100%; /* 确保在小屏幕上不溢出 */
}
</style>